<template>
  <div class="shop" ref="x">
    <div class="search">
      <div class="search__back iconfont" @click="handleBack">&#xe8b5;</div>
      <el-input
        class="w-50 m-2"
        size="large"
        placeholder="请输入商品名称搜索"
        prefix-icon="Search"
      />
    </div>
    <div class="shopinfo">
      <ShopDetail :info="item" :ishide="false" v-show="item.imgUrl"/>
    </div>
    <Content class="con" :h="h" />
    <Cart />
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// import { Search } from '@element-plus/icons-vue'
import ShopDetail from '../../components/ShopDetail.vue'
import Cart from './Cart.vue'
import Content from './Content.vue'
import { shopApi } from '../../api/detail'

// 发送axios 获取商店信息
function useShopEffect () {
  const data = reactive({ item: {} })
  const getShopInfo = async id => {
    try {
      const res = await shopApi(id)
      data.item = res.data
    } catch (error) {
      console.log(error)
    }
  }
  const { item } = toRefs(data)
  return { item, getShopInfo }
}

// 点击箭头按钮，返回上一个页面
function useBackEffect () {
  const router = useRouter()
  const handleBack = () => {
    router.back()
  }
  return handleBack
}

export default {
  name: 'Shop',
  components: { ShopDetail, Content, Cart },
  setup () {
    const route = useRoute()
    const { item, getShopInfo } = useShopEffect()
    const handleBack = useBackEffect()
    getShopInfo(route.params.id)

    const x = ref(null)
    const h = ref(0)
    onMounted(() => {
      h.value = (x.value.clientHeight - 240) + 'px'
    })
    return { item, handleBack, x, h }
  }
}
</script>

<style lang="scss" scoped>
.shop {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 0 .18rem;
  .shopinfo {
    height: 1.34rem;
  }
  .search {
    display: flex;
    margin: .14rem 0 .04rem 0;
    &__back {
      position: relative;
      top: .08rem;
      width: .3rem;
      height: .32rem;
      text-align: center;
      font-size: .24rem;
      color: #949292;
    }
    .el-input {
      flex: 1;
      line-height: .32rem;
      border-radius: .16rem;
      background-color: #f5f5f5;
    }
  }
  .con {
    flex:1;
    // background-color: pink;
    margin: 0 -.18rem;
  }
}

</style>
